<template>
	<view style="position: relative;height: 100%;" @click.stop="">
		<swiper :current="swiperCurrent" @change="listSwitch" class="swiper" :duration="300" v-if="all.changeId==0">
			<swiper-item class="swiper-item" v-for="i in 7" :key='i'>
				<scroll-view style="height: calc(100% - 70rpx)" scroll-y>
					<view class="flex flex-wrap-w">
						<view class="emoji" v-for="(item,index) in all.list" :key="index">
							<view class="emoji-text" @click.stop="onEmoji(item)">
								{{item}}
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view v-else class="flex flex-wrap-w">
			<view class="icon flex flex-ai-c flex-jc-c">
				<u-icon name="plus" size="40" color="rgb(130,130,130)"></u-icon>
			</view>
		</view>
		<!-- background: rgba(200,200,200,0.8); -->
		<scroll-view style="position: absolute;bottom: 0;height: 70rpx;" scroll-x>
			<view class="flex flex-ai-c" style="height: 100%;">
				<view @click.stop="" v-for="item in all.icon" :key='item.id' @click="changeIcon(item.id)"
				 style="padding: 20rpx;margin-left: 20rpx;border-radius: 15rpx;" :style="{'background':item.id == all.changeId?'rgba(200,200,200,0.8)':''}">
					<view v-if="item.isicon" style="height: 30rpx;">
						<u-icon :name="item.name" size="30"></u-icon>
					</view>
					<view v-else class="flex flex-ai-c" style="height: 30rpx;">
						<image class="bci" style="width: 30rpx;height: 30rpx;" :src="item.name"></image>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script lang="ts" setup>
	import {
		reactive,
		ref,
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import common from '@/api/common.js'
	let swiperSize = ref<number>()
	let all = reactive({
		list: [],
		changeId: uni.getStorageSync('emojiID') || 0,
		icon: [
			{
				name: '',
				id: 0,
				isicon: false
			},
			{
				name: 'heart',
				id: 1,
				isicon: true
			}
		]
	})
	let swiperCurrent = ref<number>(0)
	const emits = defineEmits(['listSwitch','change'])
	const listSwitch = (event: any) => {
		getEmo(event.detail.current, 80)
		emits('listSwitch',event.detail.current)
	}
	const changeIcon = (i) => {
		all.changeId = i
		uni.setStorageSync('emojiID',i)
	}
	const onEmoji = (text: string) => {
		emits('change', text)
	}
	//获取表情包
	const getEmo = async (page : number, pageSize : number) => {
		const res = await common.emoji(page, pageSize)
		all.list = res.data
		swiperSize.value = res.swiperSize
	}
	onLoad(() => {
		getEmo(swiperCurrent.value, 80)
	})
</script>

<style lang="scss" scoped>
	.emoji{
		width: 10%;
		// height: 80rpx;
		margin: 20rpx 0;
		text-align: center;
		.emoji-text{
			text-align: center;
			font-size: 46rpx;
		}
	}
	.swiper{
		width: 100%;
		height: 100%;
	}
	.icon {
		border: 1px dashed rgb(130, 130, 130);
		height: 100rpx;
		width: 100rpx;
		margin: 20rpx;
	}
</style>